<template>
  <div class="real-alarm">
    <c-dlg
      title="告警信息"
      :type="2"
      :visible="visible1"
      width="1200"
      class="alarm-list"
      @close="close"
    >
      <el-table :data="alarms" style="width: 100%">
        <el-table-column prop="deviceName" align="center" label="设备名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="clientName" align="center" label="客户/公司名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="stationName" align="center" label="站点名称"></el-table-column>
        <el-table-column prop="description" align="center" label="描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="etime" align="center" label="告警时间" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="staus" align="center" label="状态" width="100">
          <template v-slot="{row}">{{ statusList[row.status] }}</template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="60">
          <template v-slot="{row, $index}">
            <el-button size="small" type="text" @click="showDlg(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <audio ref="notify" :src="require('@/assets/notify.wav')" autoplay></audio> -->
    </c-dlg>
    <alarm-detail
      :visible.sync="visible"
      :alarm="curAlarm"
      @alarm-cancle="dealAlarm"
      @alarm-confirm="dealAlarm"
    ></alarm-detail>
  </div>
</template>

<script>
import AlarmDetail from "./AlarmDetail";
import CDlg from "@/components/CDlg";
import { mapGetters } from "vuex";
let audioObj = null;
export default {
  components: {
    AlarmDetail,
    CDlg
  },
  data() {
    return {
      statusList: ["未处理", "取消", "确认", "派单"],
      curAlarm: null,
      visible: false,
      notify: false
    };
  },
  computed: {
    ...mapGetters(["alarms", "alarmShow", "token", "alarmMsg"]),
    visible1() {
      return this.alarms.length > 0 && this.alarmShow;
    }
  },
  watch: {
    token: {
      handler(v) {
        if (v) {
          this.$nextTick(() => {
            this.timer = setInterval(() => {
              this.$store.dispatch("alarm/getAlarms");
            }, 10000);
          });
        } else {
          clearInterval(this.timer);
        }
      },
      immediate: true
    },
    alarmMsg: {
      handler(v) {
        if (!v.length || !this.visible1) return;
        if (v.indexOf("2") > -1) {
          audioObj = new Audio(require("@/assets/notify.wav"));
          audioObj.play();
          audioObj.onended = () => {
            this.$store.commit("alarm/REMOVE_ALARM_MSG");
          };
        }
      },
      deep: true
    }
  },
  destroyed() {
    clearInterval(this.timer);
    audioObj = null;
  },
  methods: {
    close() {
      this.$store.commit("alarm/REMOVE_ALARMS");
      this.$store.commit("alarm/REMOVE_ALARM_MSG");
    },
    showDlg(r) {
      this.visible = true;
      this.curAlarm = r;
    },
    dealAlarm(id) {
      this.$store.commit("alarm/REMOVE_ALARM", id);
    }
  }
};
</script>

<style lang="scss" scoped>
.real-alarm {
  .alarm-list {
    /deep/ .content {
      margin: 0;
    }
    /deep/ th {
      background: transparent;
      padding: 8px 0;
      font-weight: normal;
    }
    /deep/ td {
      padding: 4px 0;
      cursor: pointer;
    }
  }
}
</style>
